<template>
  <div>
    <div class="filter-container">
      <el-input v-model="listQuery.id" placeholder="ID" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="findList">
        查找
      </el-button>



      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="员工ID" min-width="100px">
          <template slot-scope="{row}">
            <span class="link-type" >{{ row.personnelId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="原部门+职位" width="250px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.oldDpartment+row.oldPosition }}</span>
          </template>
        </el-table-column>
        <el-table-column label="调动至+职位" width="250px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.newDpartment+row.newPosition }}</span>
          </template>
        </el-table-column>>
        <el-table-column label="调动时间" width="200px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.dateChange }}</span>
          </template>
        </el-table-column>
      </el-table>



      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[20, 30, 50,500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm"  :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="ID" prop="id">
          <el-input :placeholder='temp.personnelId' v-module.number='temp.personnelId' :disabled="true"></el-input>
        </el-form-item>

        <el-form-item  v-permission="['admin']" label="部门" prop="department">
          <el-select v-model="temp.department" class="filter-item" placeholder="请选择部门">
            <el-option v-for="item in department" :key="item.key" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="temp.sex" class="filter-item" placeholder="请选择部门">
            <el-option v-for="item in sex" :key="item.key" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="temp.personnelName" />
        </el-form-item>
        <el-form-item label="部门" prop="position">
          <el-input v-model="temp.position" />
        </el-form-item>
        <el-form-item label="基本工资" prop="salary">
          <el-input v-model.number="temp.salary" />
        </el-form-item>
        <el-form-item label="补贴" prop="age">
          <el-input v-model.number="temp.age" />
        </el-form-item>
        <el-form-item label="奖金" prop="salary">
          <el-input v-model.number="temp.salary" />
        </el-form-item>
        <el-form-item label="总工资" prop="salary">
          <el-input v-model.number="temp.salary" />
        </el-form-item>

      </el-form>
      注：id自动生成
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          提交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import request from '@/utils/request'
export default{
  data(){
    return{
      list:null,
      listLoading:true,
      total: 0,
      dialogFormVisible:false,
      listQuery: {
        page: 1,
        limit: 20,
        department:null,
        sex:null,
        name:null
      },
      department:['产品','管理','运营','市场','技术','行政'],
      sex:['男','女'],
      dialogStatus: '',
      textMap: {
        update: 'Edit',
        create: 'Create'
      },
      dialogPvVisible: false,
      temp:{

      }
    }
  },
  created(){
    this.listQuery.department=this.$store.state.department
    this.findList()
  },
  methods:{
    findList(){
      this.listLoading = true,
        request({
          url:'/transfer',
          methods: 'get',
          params:this.listQuery
        }).then(response=>{
        this.list=response.data.content;
        this.total = response.data.total;
        this.listLoading = false
        })
    },
    resetTemp() {
      this.temp = {
        personnelId: 0,
        dateCome:'',
        personnelName: '',
        salary:undefined,
        position:'',
        department:'',
        sex:''
      }
    },

    dateFormat(time) {
      var date=new Date(time);
      var year=date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
      var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
      var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
      var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
      var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
      // 拼接
      return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
    },
    handleSizeChange(val){
      this.listQuery.limit=val
      this.findList()
    },
    handleCurrentChange(val){
      this.listQuery.page=val
      this.findList()
    }
  }

}
</script>

<style>
</style>

